<template>
  <n-tooltip>
    <template #trigger>
      <n-popover trigger="click" :width="400" placement="bottom-end">
        <template #trigger>
          <div><icon icon="ant-design:setting-outlined" text-22 /></div>
        </template>
        <template #header>
          <n-space justify="space-between" align="center" px-20>
            <n-checkbox
              :checked="checkAll.checked"
              :indeterminate="checkAll.indeterminate"
              @click="handleCheckAll"
            >
              列展示
            </n-checkbox>
            <n-button text type="info" size="small" @click="emits('reset')">
              重置
            </n-button>
          </n-space>
        </template>
        <n-checkbox-group v-model:value="checkModel">
          <n-list hoverable>
            <vue-draggable
              v-model="columnsModel"
              :animation="150"
              handle=".table-column-draggable"
              filter=".table-column-lock"
            >
              <template v-for="column in columnsModel" :key="column.key">
                <n-list-item>
                  <template #prefix>
                    <icon
                      class=""
                      :class="
                        column.lock
                          ? 'table-column-lock cursor-no-drop'
                          : 'table-column-draggable cursor-move'
                      "
                      text="18 #444"
                      dark="text-#aaa"
                      icon="iconamoon:move-fill"
                    />
                  </template>
                  <template #suffix>
                    <n-space :wrap="false" align="center">
                      <tooltip-icon
                        icon="mdi:format-horizontal-align-left"
                        tip="居左靠齐"
                        :disabled="column.lock"
                        :checked="!column.align || column.align === 'left'"
                        @click-event="column.align = 'left'"
                      />
                      <tooltip-icon
                        icon="mdi:format-horizontal-align-center"
                        tip="居中靠齐"
                        :disabled="column.lock"
                        :checked="column.align === 'center'"
                        @click-event="column.align = 'center'"
                      />
                      <tooltip-icon
                        icon="mdi:format-horizontal-align-right"
                        tip="居右靠齐"
                        :disabled="column.lock"
                        :checked="column.align === 'right'"
                        @click-event="column.align = 'right'"
                      />

                      <n-divider vertical class="mx-0!" />

                      <tooltip-icon
                        icon="ri:skip-left-line"
                        tip="固定到左侧"
                        :disabled="column.lock"
                        :checked="column.fixed === 'left'"
                        @click-event="column.fixed = 'left'"
                      />
                      <tooltip-icon
                        icon="ri:skip-right-line"
                        tip="固定到右侧"
                        :disabled="column.lock"
                        :checked="column.fixed === 'right'"
                        @click-event="column.fixed = 'right'"
                      />
                    </n-space>
                  </template>
                  <n-checkbox
                    :value="column.key"
                    :label="(column.title as string)"
                    :disabled="column.lock"
                  />
                </n-list-item>
              </template>
            </vue-draggable>
          </n-list>
        </n-checkbox-group>
      </n-popover>
    </template>
    列设置
  </n-tooltip>
</template>

<script lang="tsx" setup>
import { Icon } from "@iconify/vue";
import { useVModel } from "@vueuse/core";
import type { DataTableColumn } from "../types";
import { VueDraggable } from "vue-draggable-plus";

interface Props {
  tableColumns: DataTableColumn[];
  aliveColumns: string[];
  aliveColumnsOrigin: string[];
}
interface Emits {
  (e: "update:tableColumns", v: DataTableColumn[]): void;
  (e: "update:aliveColumns", v: string[]): void;
  (e: "reset"): void;
}
const props = defineProps<Props>();
const emits = defineEmits<Emits>();
const checkModel = useVModel(props, "aliveColumns", emits);
const columnsModel = useVModel(props, "tableColumns", emits);

const isCheckAll = props.aliveColumnsOrigin.length === checkModel.value.length;
const checkAll = ref({
  checked: isCheckAll,
  indeterminate: !isCheckAll,
});

watch(
  () => checkModel.value.length,
  (newV) => {
    if (newV === 0) {
      checkAll.value.indeterminate = false;
      checkAll.value.checked = false;
    } else if (newV === props.aliveColumnsOrigin.length) {
      checkAll.value.indeterminate = false;
      checkAll.value.checked = true;
    } else {
      checkAll.value.indeterminate = true;
    }
  },
  { immediate: true }
);

const handleCheckAll = () => {
  if (checkAll.value.indeterminate || !checkAll.value.checked) {
    checkAll.value.indeterminate = false;
    checkAll.value.checked = true;
    checkModel.value = props.aliveColumnsOrigin;
  } else {
    checkAll.value.checked = false;
    checkModel.value = [];
  }
};
</script>
